<template>
	<view class="container">
		<view class="plr_16 ptb_12 bc_fff mt_8" v-for="item,index in dataList" :key="index">
			<navigator hover-class="none" :url="`/pages/goods/pages/group_info?id=${item.groupGoodsInitiateId}`">
				<view class="fx fx_nw">
					<view class="fx_sh">
						<CusImage width="240rpx" height="240rpx" radius="24rpx" :src="item.coverImageUrl"
							mode="aspectFit" />
					</view>
					<view class="ml_12 fx_1 flow_h">
						<view class="fz_14 fe fb">{{item.productName||''}}</view>
						<view class="tags_wrap fx fx_nw height_24 flow_h">
							<view class="lh_18 pl_6 pr_6 fz_12 mr_4 mt_4 br_2 bo_1 fe" v-if="item.brandName">
								{{item.brandName}}
							</view>
							<view class="lh_18 pl_6 pr_6 fz_12 mt_4 br_2 bo_1 fe" v-if="item.styleName">
								{{item.styleName}}
							</view>
						</view>
						<view class="mt_12 fc_r fx aic" style="position: relative;">
							<text class="fb">¥<text class="fz_20">{{item.groupPrice||0}}</text></text>
							<view class="point_inner point  pa r_80 b_0 br_18 pr_7 pl_7 pt_1 pb_1 fz_10 fc_fff lh_12"   v-if="item.integra">
								可得积分: {{item.integra}}
							</view>
						</view>
						<view class="mt_19 fx aic jcb fc_primary">
							<view class="fx aic" v-if="item.status==0">
								<text class="mr_2">距结束</text>
								<CountDown :time="item.countdown*1000" color="#FE5A1C"
									@finish="item.status==0&&getData(true)" />
							</view>
							<view :style="[status(item).style]" style="text-align: right; display: block;">
								{{status(item).txt}}
							</view>
						</view>
					</view>
				</view>
			</navigator>
			<view class="fx aic jcb mt_12">
				<view class="avater_list fx pr height_32">
					<image class="pa width_32 height_32 br50 bc_fff" :src="item2" mode="aspectFit"
						v-for="item2,index2 in avatarList(item)" :key="index2"></image>
				</view>
				<view class="fx jce grid_12">
					<button class="custom_btn default fz_12 width_104 lh_32 br_57" v-if="item.status==2"
						@click="handleDelete(item,index)">删除记录</button>
					<navigator hover-class="none" :url="`/pages/goods/pages/group_info?id=${item.groupGoodsInitiateId}`"
						v-if="item.status==0">
						<button class="custom_btn primary fz_12 width_104 lh_32 br_57" style="background: #FE0000;">邀请好友参团</button>
					</navigator>
					<navigator hover-class="none" :url="`/pages/person/pages/order_detail?id=${item.orderId}`"
						v-if="item.status==1">
						<button class="custom_btn primary fz_12 width_104 lh_32 br_57" style="background: #FE0000;">查看订单详情</button>
					</navigator>
				</view>
			</view>
		</view>
		<view class="ptb_16" v-if="dataList.length">
			<u-loadmore :status="loadingStatus" />
		</view>
		<view class="pt_36" v-if="!dataList.length&&!loading">
			<Empty title="暂无拼团信息" />
		</view>
	</view>
</template>

<script>
	import CusImage from '@/components/Image'
	import CountDown from '@/components/CountDown'
	import dataMixin from '@/mixins/data.js'
	import Empty from '@/components/Empty'
	import api from '@/service/config/api.js'
	export default {
		mixins: [dataMixin],
		components: {
			CusImage,
			CountDown,
			Empty
		},
		data() {
			return {
				score: 20,
				inviteList: [],
				dataList: [],
				listUrl: '/marketing/api/groupGoodsRecord/pageList',
			}
		},
		computed: {
			avatarList() {
				return item => {
					if (item.maxPlayers) {
						return new Array(item.maxPlayers).fill('').map((item1, index1) => item.avatarList[
								index1] ?
							item.avatarList[index1] : require('@/static/images/empty_icon1.png'))
					} else {
						return []
					}
				}
			},
			status() {
				return item => {
					switch (item.status) {
						case 0:
							return {
								txt: '拼团中',
									style: {
										color: '#FE5A1C'
									}
							}
						case 1:
							return {
								txt: '已成功',
									style: {
										color: '#999999'
									}
							}
						case 2:
							return {
								txt: '拼团失败',
									style: {
										color: '#999999'
									}
							}
						default:
							return {
								txt: '',
									style: {
										color: ''
									}
							}
							break
					}
				}
			}
		},
		onLoad() {
			this.getData(true)
		},
		methods: {
			handleDelete(data, index) {
				this.$utils.showModal({
					title: '提示',
					content: '确认删除此记录？'
				}).then(() => {
					this.$utils.loading()
					api.get('/marketing/api/groupGoodsRecord/delete', {
						groupGoodsRecordId: data.groupGoodsRecordId
					}).then(() => {
						this.dataList.splice(index, 1)
					})
				})
			}
		},
	}
</script>

<style lang="scss" scoped>

.point {
				background: #D70000;
				line-height: 40rpx;

				border-bottom-left-radius: 0;
				color: #fff;
				border-top-left-radius: 48rpx;
				&::after{
					content: '';
					width: 0;
					height: 0;
					border: 10rpx solid;
					border-color: transparent #D70000 #D70000 transparent;
	
					position: absolute;
					left: -16rpx;
					bottom: 0;
				}
			}

	.container {
		.avater_list {
			&>image {
				&:nth-child(1) {
					left: 0;
					z-index: 1;
				}

				&:nth-child(2) {
					left: 40rpx;
					z-index: 2;
				}

				&:nth-child(3) {
					left: 80rpx;
					z-index: 3;
				}

				&:nth-child(4) {
					left: 120rpx;
					z-index: 4;
				}
			}
		}
	}
</style>